<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">

</head>

<body>
    <!-- 顶部导航条 -->
    <div class="nav">
        <div class="nav-c w">
            <!-- 左侧导航栏 -->
            <div class="topbar-l fl">
                <ul>
                    <li><a href="./index.html?cat_one_id=食品酒水">食品酒水</a></li>
                    <li><a href="./index.html?cat_one_id=童装玩具">童装玩具</a></li>
                    <li><a href="./index.html?cat_one_id=家装建材">家装建材</a></li>
                    <li><a href="./index.html?cat_one_id=奶粉尿裤">奶粉尿裤</a></li>
                    <li><a href="./index.html?cat_one_id=其他">其他</a></li>
                </ul>
            </div>
            <!-- 右侧购物车 -->
            <div class="shopcar fr">
                <a href="javascript:;" name="cart">购物车</a>
            </div>

            <!-- 右侧登录注册 -->
            <div class="topbar-r fr">
                <ul>
                    <li><a href="./register.html">注册</a></li>
                    <li><a href="javascript:;" name="login">登录</a></li>
                    <li><a href="javascript:;" name="logout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner w">
        <ul class="clear"><img src="../image/1.jpg" alt=""></ul>
        <ol></ol>
        <div>

            <a href="JavaScript:;" name="left">&lt;</a>
            <a href="JavaScript:;" name="right">&gt;</a>
        </div>
    </div>

    <!-- 商品列表 -->

    <div name="list1" class="list">
        <!-- 上部分列表 -->
        <ul class="list-title">
            <li><a href="./index.html?cat_one_id=食品酒水">食品酒水</a></li>
            <li><a href="./index.html?cat_one_id=童装玩具">童装玩具</a></li>
            <li><a href="./index.html?cat_one_id=家装建材">家装建材</a></li>
            <li><a href="./index.html?cat_one_id=奶粉尿裤">奶粉尿裤</a></li>
            <li><a href="./index.html?cat_one_id=其他">其他</a></li>
        </ul>
        <!-- 下部分瀑布流 -->
        <div class="list-cc">
            <ul class="list-content w"></ul>
        </div>
    </div>
    <div style="height: 50px;color: #fff;background-color: black;font-size: 30px;text-align: center;">加载完了</div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/banner.js"></script>

    <script>
        // 跳转登录
        $('[name="login"]').click(function () {
            window.location.href = `./login.html?url=${window.location.href}`;
        })

        // 退出登录
        $('[name="logout"]').click(function () {
            // 先获取 cookie 对象
            const cookieObj = myGetCookie();

            if (cookieObj.login === '1') {
                mySetCookie('login', 0, -1, '/');
                window.alert('您已经退出登录了');
            } else {
                // 还没有登录
                window.alert('您还没有登录,请您先登录');
            }
        });

        // 跳转购物车,验证是否登录
        $('[name="cart"]').click(function () {
            // 获取 cookie对象
            const cookieObj = myGetCookie();

            if (cookieObj.login === '1') {
                // 已经登录 直接跳转 购物车页面
                window.location.href = './shopcart.html';
            } else {
                if (window.confirm('您还没有登录,点击确定跳转登录页面')) {
                    window.location.href = `./login.html?url=${window.location.href}`;
                }
            }
        })
    </script>

    <!-- 轮播图 -->

    <script>
        // 定义数组 模拟 数据库数据
        const imgArr = [
            { id: 1, size: '553KB', width: 1280, height: 640, name: '1.jpg' },
            { id: 2, size: '211KB', width: 1380, height: 350, name: '2.jpg' },
            { id: 3, size: '176KB', width: 1380, height: 750, name: '3.jpg' },
            { id: 4, size: '171KB', width: 1200, height: 420, name: '4.jpg' },
            { id: 5, size: '54KB', width: 1200, height: 420, name: '5.jpg' },
        ];

        // 获取标签对象
        const oBanner = document.querySelector('.banner');
        const oUl = oBanner.querySelector('ul');
        const oOl = oBanner.querySelector('ol');

        // 定义全局作用域变量 存储 数据
        let oUlLis;
        let oOlLis;
        let liWidth;
        let length = imgArr.length;
        let index = 1;
        let intVal;
        let bool = true;

        // 调用函数 动态渲染生成页面
        setPage();
        // 调用函数 实现自动轮播
        autoLoop();
        // 鼠标移入移出函数
        setMouse();
        // 设定点击效果函数
        setClick();
        // 浏览器最小化
        hid();


    </script>

    <!-- 商品列表 -->
    <script>

        // 获取ul标签
        const oDiv = document.querySelector('.list');
        const oUls = oDiv.querySelector('.list-content');

        let page = 1;
        // 每次显示的个数
        let line = 8;

        // 获取浏览器地址栏数据对象
        let obj = myGetUrlValObj();

        // 给浏览器添加滚动监听事件
        window.addEventListener('scroll', function () {
            console.log(111);
            // 获取 页面上卷高度 
            let top = document.documentElement.scrollTop;

            // 获取 视窗窗口高度
            let height = document.documentElement.clientHeight;

            // 设定预留高度 根据实际项目设定 网速快就小一些
            let h = 500;
        
            if (top + height + h > oUls.offsetHeight) {
                // 再次调用函数 发送请求 动态生成页面 
                // 执行了多次
                setPageData();
            }
        })
        
        // 上一次请求的页数
        var flag = 0;
    
        function setPageData() {

            // 判断当前参数 是否 等于上一次请求的页数
            if(page == flag) {
                return;
            }

            // 更新标记
            flag = page;

            // 向 后端程序发送 ajax请求
            myPromiseJQueryAjax('../server/goods_list2.php', 'get', {
                cat_one_id: obj.cat_one_id != undefined ? obj.cat_one_id : "食品酒水",
                // 错误标记 原来: startLine, line
                page,line,

                // page:page 1
                // line:line 8

                // 对象的简写语法,键名和键值的变量 名称相同 写一个就行了

            }, 'json').then(function (res) {

                // 累计页数
                page += 1;

                // 存储 8条数据的数组
                const arr = res.data;

                // 根据 响应体结果 动态渲染生成 页面
                let str = '';
                arr.forEach(item => {
                    str += `
                        <li class="list-box">
                            <a href="./detail.html?goods_id=${item.goods_id}">
                                <img src="${item.goods_big_logo}" alt="">
                                <p class="list-t">${item.goods_name}</p>
                                <p class="list-price">￥${item.goods_price}</p>
                            </a>
                        </li>
            `;
                })
                // $('.list-content').html(str);

                oUls.innerHTML += str;
            })
        }

        // 初次加载
        setPageData();


    </script>
</body>

</html>